<template>
  <section class="app-container">
    <canvas id="space"></canvas>
    <div class="center-transform">
      <h2 class="title">个人vue项目</h2>
      <p>author: 卢忠宽</p>
      <ul class="list">
        <li v-for="item in routes" :key="item.name">
          <router-link :to="{name: item.name}">{{item.meta.title}}</router-link>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import startSky from '@/utils/starSky'
import routes from '@/router/routes'

export default {
  data() {
    return {
      routes: routes.filter(item => item.path !== '*')
    }
  },
  methods: {
    initSky() {
      startSky('space')
    }
  },
  mounted() {
    this.initSky()
  }
}
</script>


<style lang="scss" scoped>
.app-container {
  overflow: hidden;
  text-align: center;
  color: #cccccc;
  line-height: 2;
}
#space {
  width: 100%;
  height: 100%;
}
.list {
  margin-top: 40px;
}
</style>
